import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vueDevTools from 'vite-plugin-vue-devtools'
import viteCompression from 'vite-plugin-compression'
import progress from 'vite-plugin-progress'
import ViteRestart from 'vite-plugin-restart'
import svgLoader from 'vite-svg-loader'
import { visualizer } from 'rollup-plugin-visualizer'
import { px2rem } from 'vite-plugin-px2rem'
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer'
// https://vitejs.dev/config/
export default defineConfig({
  server: {
    host: '0.0.0.0',
    cors: true,
    port: 3345,
    // 前缀
    proxy: {
      '/api': {
        target: 'http://www.example.com',
        changeOrigin: true,
        // 前缀重写
        rewrite: (path: string) => path.replace(/^\/api/, 'api')
      }
    }
  },
  plugins: [
    vue(),
    vueJsx(),
    vueDevTools(),
    viteCompression({
      verbose: true,
      disable: false,
      deleteOriginFile: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz'
    }),
    progress(),
    ViteRestart({
      restart: ['*.config.[jt]s', '**/config/*.[jt]s', '*.config.cjs']
    }),
    svgLoader({
      defaultImport: 'url', // or 'raw'
      svgo: true
    }),
    visualizer({
      open: true,
      gzipSize: true,
      brotliSize: true
    }),
    // px2rem({
    //   width: 750, // 设计稿宽度
    //   rootFontSize: 16 // 根字体大小
    // }),
    ViteImageOptimizer()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    // 预加载
    preprocessorOptions: {
      // 全局样式变量预注入
      scss: {
        additionalData: `
        @use "./src/styles/variables.scss" as *;
        @use "./src/styles/mixin.scss" as *;`,
        javascriptEnabled: true
      }
    }
  },
  build: {
    // 10kb 以下，转 Base64
    assetsInlineLimit: 1024 * 10,
    // chunkSizewarningLimit : 1500 //配置文件大小限制，默认 500
    rollupOptions: {
      output: {
        // 每个node_modules 模块分成一个 js 文件
        manualChunks(id: string) {
          if (id.includes('node_modules')) {
            // return 'vendor'
            return id.toString().split('node_modules/.pnpm/')[1].split('/')[0].toString()
          }
          return undefined
        },
        // 用于从入口点创建的快的打包输出[name]表示文件名，[hash]表示该文件内容hash值
        entryFileNames: 'assets/js/[name].[hash].js', // 用于命名代码拆分时创建的共享快的输出命名
        chunkFileNames: 'assets/js/[name].[hash].js', // 用于输出静态资源的命名，[ext] 表示文件扩展名
        assetFileNames: 'asstes/[ext]/[name].[hash].[ext]'
      }
    }
  }
})
